<template>
  <div class="container">
    <img src="@/assets/logo.png" alt="Logo" class="logo" @click="goHome"/>
    <div class="search">
      <input
          v-model="search"
          type="text"
          placeholder="请输入书名关键字..."
      />
      <button  class="search-button"   @click="findBookByTitle">搜索</button>
    </div>
    <h1>图书信息列表</h1>
    <div class="table-container">
    <table>
      <thead>
      <tr>
        <th>ID</th>
        <th>标题</th>
        <th>作者</th>
        <th>出版社</th>
        <th>出版日期</th>
        <th>类别</th>
        <th>库存</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="book in books" :key="book.id">
        <td>{{ book.id }}</td>
        <td>{{ book.title }}</td>
        <td>{{ book.author }}</td>
        <td>{{ book.publisher }}</td>
        <td>{{ formatDate(book.publishDate) }}</td>
        <td>{{ book.category }}</td>
        <td>{{ book.stock }}</td>
      </tr>
      </tbody>
    </table>
    </div>
  </div>
</template>/

<script>
import api from "@/api.js";

export default {
  data() {
    return {
      books: [],
      search: '',
    };
  },
  methods: {
    goHome() {
      this.$router.push('/main');
    },
    async findBook() {
      const response = await api.findBookU();
      const data = response.data;
      this.books = data.data;
    },
    async findBookByTitle() {
      const response = await api.findBookByTitle(this.search);
      const data = response.data;
      this.books = data.data;
      this.search = '';
    },
    formatDate(date) {
      if (!date) return '';
      const d = new Date(date);
      return d.toISOString().split('T')[0]; // 格式化为 YYYY-MM-DD
    },
  },
  mounted() {
    this.findBook();
  },
};
</script>

<style scoped>

.container {

  justify-content: center; /* 垂直居中 */
  align-items: center; /* 水平居中 */
  height: 100vh; /* 高度占满视口 */
  width: 100%; /* 宽度占满 */
  margin: 0;
  padding: 0;
  background-color: #ffffff;
}
.logo{
  width: 250px; /* 设置宽度 */
  height: auto; /* 保持比例 */
  margin-top: 10px;
  margin-left: 20px;
}

.logo:hover {
  transform: scale(1.1); /* 悬停时放大 */
}

.search {
  position: absolute;
  top: 50px;
  right: 50px; /* 固定在右上角 */
  display: flex;
  align-items: center;
}

input {
  width: 300px;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  outline: none;
  transition: border-color 0.3s;
}

input:focus {
  border-color: #007bff;
  box-shadow: 0 0 4px rgba(0, 123, 255, 0.3);
}

.search-button {
  margin-left:5px;
  padding: 8px 16px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.search-button:hover {
  background-color: #0056b3;
}
h1 {
  margin-top: 20px;
  text-align: center;
  color: #333;
  margin-bottom: 20px;
  font-size: 24px;
}

/* 表格容器样式 */
.table-container {
  max-height: 400px; /* 设置最大高度 */
  overflow-y: auto; /* 启用垂直滚动条 */
  border: 1px solid #ddd; /* 添加边框 */
  margin-top: 20px;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
  background-color: #fafafa;
}

thead {
  background-color: #f4f4f4;
}

th, td {
  padding: 12px;
  text-align: center;
  border: 1px solid #ddd;
}

th {
  font-weight: bold;
  color: #555;
}

tbody tr:nth-child(even) {
  background-color: #f9f9f9;
}

tbody tr:hover {
  background-color: #f1f1f1;
}

button {
  padding: 8px 12px;
  font-size: 14px;
  color: #fff;
  background-color: #007bff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

button:hover {
  background-color: #0056b3;
}

</style>
